<template>
	<view :data-theme="theme" class="container">
		<view style="background-color: #fff;padding-bottom: 10rpx;">
			<view style="padding: 24rpx 24rpx;">
				<u-search v-model="keyword" @custom="searchProduct" @search="searchProduct" placeholder="请输入商品名称"
					actionText="搜索" :actionStyle="{color:'#000'}" shape="square" style="flex: none;"></u-search>
			</view>
		</view>
		<!-- 商品审核，筛选 -->
		<view style="background-color: #fff;">
			<view style="display: flex; justify-content: center;height: 40px;line-height: 40px;text-align: center;">
				<view style="flex: 1;justify-content: center;display: flex;"
					:style="{color:operatyGroupShow?bgColor:null}" @click="operatyGroupShow = true">
					<view style="font-size: 14px;margin-right: 6rpx;">{{radiovalue1?radiovalue1:"全部售卖区域"}}</view>
					<u-icon :name="operatyGroupShow?'arrow-up-fill':'arrow-down-fill'" size="10"
						:color="operatyGroupShow?bgColor:''"></u-icon>
				</view>

				<view style="flex: 1;justify-content: center;display: flex;">
					<view style="font-size: 14px;margin-right: 6rpx;">全部类目</view>
					<u-icon name="arrow-down-fill" size="10"></u-icon>
				</view>
			</view>
		</view>

		<scroll-view scroll-y="true" class="scroll-view print_center swiper-item"
			style="height: 100%; overflow: hidden;" :style="{ 'padding-bottom':'40rpx' }"
			@scrolltolower="scrolltolowerFn">
			<!-- 循环下面 -->
			<item-goods-page ref="page" :bgColor="bgColor" :dataList="newDataList" @isAllChecked="isAllCheck"></item-goods-page>
		</scroll-view>

		<!-- 内容为空 -->
		<u-empty class="empty" v-if="!dataList.length" mode="data"
			icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		<!-- 上拉加载更多 -->
		<uni-load-more :status="loadMoreStatus"></uni-load-more>

		<view style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;">
			<view style="display: flex;align-items: center;">
				<view class="checkAll" style="flex: 1;">
					<checkbox-group @change="allSelectChange">
						<label class="uni-list-cell uni-list-cell-pd" style="display: flex;line-height: 34rpx;">
							<view>
								<checkbox :value="'1'" :checked="isAllChecked" />
							</view>
							<view>全选</view>
						</label>
					</checkbox-group>
				</view>
				<button @click="toAddSelect()" class="bg_color"
					style="border-radius: 16rpx;color: #FFF;font-weight: bold;font-size: 30rpx;padding:14rpx 20rpx;flex: 1;margin-left: 10rpx;"
					:color="bgColor">下一步,设置活动</button>
			</view>
		</view>

		<tui-drawer mode="bottom" :visible="operatyGroupShow" @close="close">
			<view class="u-demo-block2 ensure">
				<view class="title">
					<text @click="close" class="iconfont icon-guanbi5"></text>
					选择售卖区域
					<text @click="modeOfTransportComuleDate" class="iconfontRight">确认</text>
				</view>
				<view style="margin: 10px 0 10px 0">
					<radio-group v-model="radiovalue1" @change="radioChange">
						<label
							style="display: flex;flex-direction: row;margin: 20rpx;border-bottom: 1px solid #eee;padding: 20rpx 0;"
							v-for="(item, index) in radioOperatyList" :key="index">
							<view>
								<radio :value="item.type" />
							</view>
							<view style="line-height: 19px;">{{item.name}}</view>
						</label>
					</radio-group>
				</view>
			</view>
		</tui-drawer>
	</view>
</template>

<script>
	import {
		setThemeColor
	} from '@/utils/setTheme.js';
	let app = getApp();
	import tuiDrawer from '@/components/tui-drawer/index.vue';
	import ItemGoodsPage from './components/item-goods-page.vue';
	import {
		getSeckillProApi
	} from '@/api/marketing.js';
	export default {
		components: {
			tuiDrawer,
			ItemGoodsPage
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				keyword: '',
				isAllChecked: false,
				productParam: {
					page: 1,
					limit: 5,
				},
				dataList: [],
				newDataList: [], //新组合数据
				operatyGroupShow: false,
				loadMoreStatus: 'noMore',
				loading: false,
				//-------弹窗事件--------
				radiovalue1: '',
				radioOperatyList: [],
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			console.log(options);
			this.productParam.activityId = options.activityId;
			this.initData();
		},
		methods: {
			searchProduct() {
				console.log('111')
			},
			close() {
				this.operatyGroupShow = false;
			},
			isAllCheck(value) {
				this.isAllChecked = value;
				// this.$set(this,'isAllChecked',value)
			},
			//更新全选按钮状态
			updateAllSelectState(index) {
				let i = index == null ? this.currentIndex : index;
				if (this.checkboxValue.length > 0) {
					this.allSelect = [1];
				} else {
					this.isAllChecked = false;
					this.allSelect = [];
				}
			},
			// 全选框
			onCheckAll(val) {
				let that = this;
				let isAllCheck = val.detail.value.length > 0;
				console.log('isAllCheck', isAllCheck)
				if (isAllCheck) {
					this.checkboxValue = this.newDataList.filter(item => !item.selected).map((item) => JSON.stringify(item));
					for (let item of that.newDataList) {
						// 如果复选框不是禁用状态，则勾选它
						if (!item.selected) {
							item.checked = true;
						}
					};
					this.$refs.page.checkboxAllSelect();
					console.log('that.checkboxValue', that.checkboxValue)
				} else {
					this.checkboxValue = [];
					for (let item of that.newDataList) {
						item.checked = false;
					}
					console.log('that.dataList', that.newDataList)
				}
			},
			//多选
			checkboxChange(checkboxValue) {
				this.checkboxValue = checkboxValue;
				this.updateAllSelectState();
			},
			//多选按钮事件
			allSelectChange(checkboxValue) {
				// let page = this.$refs.tab[this.currentIndex];
				// if (checkboxValue.length > 0) {
				// 	page.checkboxAllSelect();
				// } else {
				// 	page.checkboxAllSelect(true);
				// }
				let page = this.$refs.page;
				if (checkboxValue.detail.value.length > 0) {
					page.checkboxAllSelect();
				} else {
					page.checkboxAllSelect(true);
				}
			},
			initData() {
				// 首次激活时被调用
				this.productParam.page = 1;
				this.loadMoreStatus = 'more';

				this.getProductList();
			},
			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				if (this.loadMoreStatus != 'more') {
					return;
				}
				this.productParam.page++;
				this.getProductList(true);
				this.$set(this,'isAllChecked',false);
			},

			clear() {
				// 释放数据时被调用，参考 swiper-list 缓存配置
				this.dataList.length = 0;
			},
			onrefresh(e) {
				this.refreshing = true;
				this.refreshText = "刷新中...";
				setTimeout(() => {
					this.refreshing = false;
					this.refreshFlag = false;
					this.refreshText = "已刷新";
				}, 2000)
			},
			onpullingdown(e) {
				if (this.refreshing) {
					return;
				}
				this.pulling = false;
				if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
					this.refreshFlag = true;
					this.refreshText = "释放立即刷新";
				} else {
					this.refreshFlag = false;
					this.refreshText = "下拉可以刷新";
				}
			},
			//打开更多
			button4Click(item) {
				// 打开模态框
				this.$emit('openMoreSetting', item);
			},
			// 搜索
			searchProduct(valueKey) {
				this.productParam.page = 1;
				this.productParam.keywords = valueKey;
				this.loadMoreStatus = 'more';
				this.getProductList();
				this.productLstTwoList();
			},
			// 按时间顺序查询 0正序,1倒序
			timeTypeProduct(valueType) {
				this.productParam.page = 1;
				this.productParam.timeSort = valueType;
				this.loadMoreStatus = 'more';
				this.getProductList();
				this.productLstTwoList();
			},
			showToast(type, message) {
				this.$refs.uToast.show({
					type: type,
					message,
					message,
					complete() {}
				})
			},

			//-------------------------------api
			//加载 商品列表
			getProductList(isMerge) {
				let that = this;
				this.productLoading = true;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				getSeckillProApi(this.productParam).then(res => {
					let data = res.data;
					if (isMerge) {
						that.$util.SplitArray(data.list, that.dataList);
						that.checkboxValue = [];
					} else {
						that.dataList = data.list;
					}
					that.totalPage = data.totalPage;
					if (data.totalPage == this.productParam.page || data.totalPage == 0) {
						that.loadMoreStatus = 'noMore';
					}
					that.productLoading = false;
					uni.hideLoading();
					this.newDataValue();
				}).catch(err => {
					uni.hideLoading();
					console.log("productHeadersApi error", err)
				});
			},
			/** 整理数组，拆为子集合 */
			newDataValue() {
				const _this = this;
				this.dataList.map((item) => {
					item.attrValue.map((i) => {
						_this.$set(i, 'parentId', item.id);
						_this.$set(i, 'checked', false);
						_this.$set(i, 'sort', item.sort);
						_this.$set(i, 'name', item.name);
						_this.$set(i, 'categoryName', item.categoryName);
					});
				});
				let allSonVOLists = this.dataList.reduce((acc, current) => {
					return acc.concat(current.attrValue);
				}, []);
				this.newDataList = allSonVOLists;
			},

			/**
			 *下一步，设置活动  */
			toAddSelect() {
				let that = this;
				let checkboxValue = this.$refs.page.checkboxValue;
				let selectProductArray = checkboxValue.map(item => {
					return {
						brandName: item.brandName,
						...item,
					};
				}); // 提取出所有 checked 属性值为 true 的对象的 count 属性值

				if (!selectProductArray.length) {
					return uni.showToast({
						title: '请先选择商品',
						icon: 'error',
						duration: 2000 // 持续时间为 2 秒
					});
				}
				that.toSettingActivity(selectProductArray); //页面跳转
			},

			//下一步，设置活动
			toSettingActivity(item) {
				let that = this;
				let activityId = that.productParam.activityId;
				this.goPage(`/pages/marketing/seckillDemo/settingSeckillAct/index?activityId=${activityId}`, (res) => {
					// 通过eventChannel向被打开页面传送数据
					res.eventChannel.emit('productAttr', {
						data: item,
						// type: type,
						activeDateTime: this.activeDateTime,
						from: "saveProduct",
					})
				})
			},

			goPage(url, success) {
				uni.navigateTo({
					url,
					success: success
				});
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {
		background-color: lightblue;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	::v-deep .u-popup.data-v-3a231fda {
		flex: 0 !important;
	}

	// .content {
	// 	flex: 1;
	// 	overflow: hidden;
	// }

	// .scroll-view {
	// 	height: 100%;
	// }

	// .scroll-view-inner {
	// 	height: 200%;
	// 	/* 根据实际情况设置高度 */
	// 	background-color: #fff;
	// 	/* 内容区域背景色 */
	// }
	.swiper-item {
		flex: 1;
		flex-direction: column;
	}

	/** 弹窗 */
	.ensure {
		width: 100%;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title {
			font-size: 30rpx;
			font-weight: bolder;
			color: #282828;
			text-align: center;
			margin: 12rpx 0 36rpx 0;
			position: relative;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #f0edf0;

			.iconfont {
				position: absolute;
				left: 30rpx;
				top: 0;
				font-size: 30rpx;
			}

			.iconfontRight {
				position: absolute;
				right: 30rpx;
				top: 0;
				// font-size: 36rpx;
				font-size: 30rpx;
				@include main_color(theme);
			}
		}

		.list {
			height: 750rpx;
			margin: 0 30rpx;
			overflow-x: hidden;
			overflow-y: auto;

			.item {
				margin-bottom: 52rpx;

				.pictrue {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					margin-right: 30rpx;

					/deep/image,
					.easy-loadimage,
					image,
					uni-image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.text {
					width: 618rpx;
					color: #999999;
					font-size: 28rpx;

					.name {
						color: #333333;
						font-weight: bold;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
</style>